如何使用Javascript为输入或textarea中的数字加下划线

Question

所以我有一个textarea输入框，我想知道有没有办法在这个输入框中加下数字值而不是使用正则表达式（我真的不理解它们）。

这里是我的changeAll（）函数，它什么也没做，只是从输入框中获取值，它会将不同的div元素（我的输出框）更改为新加下划线的输出：

changeAll = function(){
var x = document.getElementById('input').value;
//underline numbers ....
document.getElementById('demo').innerHTML = y;
}

我也知道CSS就是

#number { 
    text-decoration: underline;
}

任何有关如何以比正则表达式更容易的方式执行此操作的帮助将非常感激。

Answer 1

你不能在textarea中这样做。 但是，有一个小技巧可以应用，那就是使用一个完全透明的textarea，用户输入，听取textarea值的任何更改，并将其渲染到另一个元素的顶部显示内容。 由于它可以是任何类型的元素，您可以应用任何您想要的样式。 当然，为了使插入符号正确显示，您需要与textarea中完全相同的字体。

大多数基于浏览器的编辑器都具有语法高亮功能。

我建议不要使用contenteditable，因为这将有效地允许任何标记最终在您的容器中。

Answer 2

使用正则表达式：

 var input = document.getElementById("input"); var output = document.getElementById("output"); input.addEventListener("keyup", function () { output.innerHTML = input.value.replace( /(\\d+)/g, "<span style=\\"text-decoration:underline\\">$1</span>" ); }); 

 <textarea id="input"></textarea> <div id="output"></div> 

没有正则表达式：

 var input = document.getElementById("input"); var output = document.getElementById("output"); input.addEventListener("keyup", function () { var open = false; var digit = false; var x = this.value, y = ""; var i, n = x.length; for (i = 0; i < n; i++) { digit = x[i] >= '0' && x[i] <= '9'; if (digit && !open) { open = true; y += "<span style=\\"text-decoration:underline\\">"; } else if (!digit && open) { open = false; y += "</span>"; } y += x[i]; } output.innerHTML = y; }); 

 <textarea id="input"></textarea> <div id="output"></div>