Question

我有一些文字：

“Lorem ipsum dolor sit amet，consectetur adipiscing elit.Nullam porta porttitor ultricies.Nullam blandit nulla vitae ullamcorper egestas.Maecenas dui orci，elementum non ipsum in，elementum pulvinar fermentum risus.Proin at enim porttitor，congue metus condimentum，lacinia nisi.Nam ac nisl diam.Nullam elementum purus eget risus hendrerit vulputate。“

我有一些单词列表，我希望用

包装在文本中

示例词：

words = [
    elementum : 'class1',
    pulvinar : 'class2',
    lacinia : 'class3'
]

每个包装的单词也必须具有唯一的数据属性。

结果文字必须类似于

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta
porttitor ultricies. Nullam blandit nulla vitae ullamcorper egestas. 
Maecenas dui orci, 
<span class="class1" data-id="132123">elementum</span> non ipsum 
in, <span class="class1" data-id="1344000">elementum</span>
<span class="class2" data-id="1344030">pulvinar</span> fermentum risus.
Proin at enim porttitor, congue metus condimentum, <span class="class3" data-id="1344000">lacinia</span> nisi. Nam ac nisl diam. 
Nullam elementum purus eget risus hendrerit vulputate.

更新：我可以使用正则表达式但是如何为每个替换的单词我可以使用唯一的数据ID（一些随机字符串），因为有些单词可以在文本中两次。

Answer 1

您可以为每个单词使用正则表达式替换单词：

＆＃13;

const string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta porttitor ultricies. Nullam blandit nulla vitae ullamcorper egestas. Maecenas dui orci, elementum non ipsum in, elementum pulvinar fermentum risus. Proin at enim porttitor, congue metus condimentum, lacinia nisi. Nam ac nisl diam. Nullam elementum purus eget risus hendrerit vulputate.';
const classMap = [
  ['elementum', 'class1'],
  ['pulvinar', 'class2'],
  ['lacinia', 'class3']
];

const wrapped = classMap.reduce((wrapped, [word, className]) => {
  return wrapped.replace(
    new RegExp(`(${word})`, 'g'), 
    `<span class="${className}">$1</span>`
  );
}, string);

console.log(wrapped);

＆＃13;

在文本中包含与数组中的单词匹配的单词并添加唯一的类名

1 个答案: