javascript - jQuery / javascript：查找字符并包装包含它的单词

Question

我正在尝试将我的文本中包含一个或多个连字符“-”的所有单词包装成一个跨度，这样我就可以添加一个无换行符 css 规则。不幸的是，我不知道如何实现这一点。任何想法/提示将不胜感激。谢谢！

例子：

    Before: <p>This product is ready-to-use.</p>
    After:  <p>This product is <span class="nbr">ready-to-use</span>.</p>

Answer 1

以下正则表达式可以解决问题：

((\w+-)+\w+)(?![^<]*\>)

该((\w+-)+\w+)部分是一个正则表达式，它匹配由连字符分隔的单词。后面的部分(?!确保表达式后面没有前面>有 a 的 a <。这是为了避免匹配 html 标记中由连字符分隔的单词（例如：<div class="style: margin-left">。您可能不想匹配那个margin-left）。

为了在 javascript 中使用正则表达式，您必须使用原始字符串并在正则表达式周围添加括号以将匹配的值捕获为一个组：

text.replace(/(((\w+-)+\w+)(?![^<]*\>))/m, '<span class="nbr">$1</span>');

Answer 2

我前段时间写了一个库。它适用于 DOM 文本节点，因此它避免了使用 RegEx 解析 HTML（这是不可能的）。

https://github.com/prinzhorn/linguigi

例子

var ling = new Linguigi();

ling.eachToken(/[\w-]+/, true, function(token) {
    return '<span class="nbr">' + token + '</span>';
});

您可能希望使用更符合您需求的正则表达式。

Answer 3

    String text = "<p>This product is ready-to-use.</p>";
    text = text.replaceAll("(\\w+-(\\w+-?)+)", "<span class=\"nbr\">$1</span>");
    System.out.println(text);