Question

我正在尝试仅将内联样式添加到段落元素中的数字。例如：

<p>This paragraph has the numbers 1 and 2 in it.</p>

所以在这个例子中，我想要<span class="style">1</span>和<span class="style">2</span>。围绕该段中的两个数字。

我正在尝试编写一个javascript来完成此操作，因此我不必回到我正在处理的文档中并在每个数字周围手动添加样式标记，因为文档很长

到目前为止，这是我写的内容，但是我很难弄清楚如何将编辑内容重新合并到HTML段落中，该如何处理。

let regEx=/[0-9]/g;
let list = [];
let paragraphs = document.getElementsByTagName("p");
 for (var i = 0; i < paragraphs.length; i++) {
 let html = paragraphs[i].innerHTML;
 list.push(html);
   }
 // all paragraphs into one string.
 let joined = list.join(' ');
 // all the numbers in the paragraphs stored in array
 let numbers = joined.match(regEx);
// define array for styling edits
 let edits = [];
// adding the styling tags to each num
 numbers.forEach(function(num){

 edits.push('<span class="style">' + num + '</span>');

// outputs ["<span class='style'>3</span>", "<span class='style'>7</span>", "<span class='style'>4</span>", "<span class='style'>5</span>"]

 });
 // need to insert edits into paragraph html

如果有人可以提供任何关于我如何能够实现这一目标的建议，那么我仍然相对较新的使用JS。

Answer 1

const paragraphs = document.getElementsByTagName("p");

for (var i = 0; i < paragraphs.length; i++) {
  const regEx=/([0-9])/g;
  const newHtml = paragraphs[i].innerHTML.replace(regEx, '<span class="style">$1</span>');

  paragraphs[i].innerHTML = newHtml;
}

我更新了你的正则表达式以将数字放在一个组中，然后在字符串替换中你可以引用该组，因为只有一个它将是$ 1。正如你在替换中看到的那样，我们用适当的跨度包装它，然后将它直接插回到innerHTML中。

我注意到你的正则表达式只捕获单位数字，如果你想捕获多位数字，你可以像这样更新你的注册表：/（[0-9] +)/g.

我创建了一个简单的jsfiddle来向您展示它是如何工作的：https://jsfiddle.net/andyorahoske/dd6k6ekp/35/

Answer 2

我将其中最基本的部分分解为可重用的功能，您可能会在其他情况下找到它。

/**
 * Wraps numbers in a string with any provided wrapper.
 * @param  {String} str A string containing numbers to be wrapped.
 * @param  {String} wrapper A string with placeholder %s to define the wrapper. Example - <pre>%s</pre>
 * @return {String} The original string with numbers wrapped using the wrapper param.
 */
function wrapNumbers(str, wrapper) {
    var numbersInStr = str.match(/\d+/g) || [];
    var chunks = [];
    var segmentStart = 0;
    for(var i = 0; i < numbersInStr.length; i += 1) {
        var number = numbersInStr[i];
        var indexOfNumber = str.indexOf(number);
        var fWrapper = wrapper.replace('%s', number);
        chunks.push(str.slice(segmentStart, indexOfNumber));
        chunks.push(fWrapper);
        segmentStart = indexOfNumber + number.length;
    }
    if(segmentStart < str.length) {
        chunks.push(str.slice(segmentStart, str.length));
    }
    return chunks.join('');
}

要在您的用例中使用它，它可能如下所示：

var paragraphs = document.getElementsByTagName("p");
var wrapper = '<span class="style">%s</span>';
for(var i = 0; i < paragraphs.length; i += 1) {
    var paragraph = paragraphs[i];
    paragraph.innerHTML = wrapNumbers(paragraph.innerHTML, wrapper);
}

Codepen：https://codepen.io/bryceewatson/pen/vRqeVy?editors=1111

Answer 3

这是一个新代码https://jsfiddle.net/fazanaka/au4jufrr/1/

var element = document.getElementById('text'),
    text = element.innerText,
    wordsArray = text.split(' '),
    newString;

for(var i = 0; i < wordsArray.length; i++){
    if(!isNaN(parseFloat(wordsArray[i])) && isFinite(wordsArray[i])){
    wordsArray[i] = "<span class='style'>" + wordsArray[i] + "</span>";
  }
}
newString = wordsArray.join(' ');
element.innerHTML = newString;

我希望它可以帮到你

<强> UPD：对于所有段落https://jsfiddle.net/fazanaka/qx2ehym4/

仅在特定字符周围添加样式标记

3 个答案: