如何使用 JS 在变量表达式周围添加 HTML 标签

Question

我想在标记 [x,y] 周围添加 HTML 标记，其中 x 和 y 的变化可能会有所不同。我尝试使用一些正则表达式来获取这些文本，但我没有得到想要的结果。

我用这个命题：Insert HTML into text node with JavaScript

在我的页面中，有

[x,y] 标记 x 和 y 是介于 -99 和 99 之间的数字

此标记是在文本编辑器中手动编写的，是与视频游戏相关的文章内容的一部分，同一页面中可能有多个标记。

所以我需要全部替换

 [x,y] to <em class="position">[x,y]</em>

我试试这些正则表达式：

\[(.*?)\] (but add only <em> on . in the page)
\[0-9+\] (but add one <em> for each number in [x,y])

目的是允许用户单击这些元素将其复制到剪贴板。 （这第二部分工作正常）

有人可以帮助我吗？ :)

Answer 1

您可以使用.match() 函数从字符串中提取[x,y] 组合，然后将这些匹配的组合替换为<em> 标记

非重复坐标

如果文本中没有重复的坐标，则使用以下方法

const p = document.querySelector('p');
let str = p.textContent;
const regex = /(\[-?\d{1,2},-?\d{1,2}\])+/g;
const matches = str.match(regex);

matches.forEach(m => (str = str.replace(m, `<em class="position">${m}</em>`)));
p.innerHTML = str;

.position {
  color: blue;
}

<p>[10,24] or [14,-25] or [-100,-210] or [-99,99]</p>

重复坐标

如果有重复坐标，则使用以下方法

const p = document.querySelector('p');
let str = p.textContent;
const regex = /(\[-?\d{1,2},-?\d{1,2}\])+/g;
const matches = str.match(regex);

matches.forEach((m, i) => {
  str = str.split(m).join(`<em class="position">${m}</em>`);
});

p.innerHTML = str;

.position {
  color: blue;
}

<p>[10,24] or [10,24] or [14,-25] or [14,-25] or [-100,-210] or [-99,99]</p>

Answer 2

您可以使用.replace()，并传递一个正则表达式。关于我使用的正则表达式的更多解释：

(Courtesy of Regex101.com)

演示：

var p = document.querySelector('p');

p.innerHTML = p.innerText.replace(/(\[-?\d+,-?\d+\])/g, '<em class="position">$1</em>');

.position { font-weight: bold; color: red; }

<p>[10,24] or [14,-25] or [x,y] (← these are not valid numbers)</p>