Question

我正在尝试重新设置div元素，以便通过单击按钮为任何数字加下划线。我只使用javascript而不是JQuery。

这部分有效但我无法超越它。目前，我的代码只会强调一个唯一的数字，而且不会使用多个数字来强调数字

我的div包含如下文字;

此处有文字包含数字，如数字8和数字9或数字18

此下方的按钮应允许用户点击并加下文字中的所有数字

<script>



 changeAll = function(){
 var myText = document.getElementById("myText").innerHTML;
 for (var i=0; i<=1000; i++){
     myText = myText.replace(i, "<u>"+i+"</u>");
 }
document.getElementById("myText").innerHTML=myText;
}

 </script>

Answer 1

您需要复制i，因为EC5中没有块范围。 Var i正在逃避循环。这意味着它只会强调循环的最后一个索引

你可以使用IIFE闭包来捕捉我的状态

(function (i){
    //assign underscore
})(i)

或者您可以尝试使用

for (let i=0; i<=1000; i++){ //assign underscore }

请注意并非所有浏览器都实现了let关键字。这是EC6功能

Answer 2

您的方法的主要问题是，在更换单个数字后 - 您正在更改文本，因此您无法再找到数字（数字已经被标记损坏）。

标准方法是使用regexp，如下所示：

＆＃13;

var v = document.getElementById('txt').innerText;
v = v.replace(/([\d]+)/g, '<u>$1</u>');
document.getElementById('txt').innerHTML = v;

＆＃13;

<div id="txt">test 1 with 12 some 123 numbers</div>

＆＃13;

Answer 3

不是循环使用数字，而是使用正则表达式

一次完成所有操作

var myText = document.getElementById('myText');
var text = myText.innerHTML;
myText.innerHTML = text.replace(/(\d+)/g, '<u>$1</u>');

<p id="myText">
This is some 713 text with 8 a few numbers 99 in it.
</p>

(\d+)匹配一个或多个数字作为捕获组，替换字符串中的$1使用组中捕获的文本，并由下划线标记围绕它。

注意 - 不推荐使用<u>标记，更好的做法是标记指示它是什么的内容，而不是您希望它的外观，因此我会将其标记为数字然后使用CSS样式使数字加下划线：

text.replace(/(\d+)/g, '<span class="number">$1</span>'); // JS
.number { text-decoration: underline; }                   // CSS

在HTML

3 个答案: