javascript - 突出显示 html 字符串中的关键字

Question

我在javascript中有一个字符串：

str='asdf <a href="http://asdf.com">asdfasdfasdf</a> <span class="asdf">asdf</span>';

如何在不更改 html 标记的情况下使文本中的每个“a”变为粗体？

我想要做：

str = str.replace("a","<b>a</b>");

str 应该等于：

"<b>a</b>sdf <a href='http://asdf.com'><b>a</b>sdf......"

Answer 1

  str = str.replace(new RegExp("<a href='http://asdf.com'>", 'gi'), function(matched){return matched + "<b>"});

  str = str.replace(new RegExp('</a>', 'gi'), function(matched){return  "</b>" + matched });

http://jsfiddle.net/5FZJQ/4/

Answer 2

正则表达式是

 /searchString(?=[^<>]*(<|$))/g

例如：

>    str="asdf <a href='http://asdf.com'>asdfasdfasdf</a> <span class='asdf'>asdf</span>";
>    str.replace(/asd(?=[^<>]*(<|$))/g, "<b>$&</b>")

"<b>asd</b>f <a href='http://asdf.com'><b>asd</b>f<b>asd</b>f<b>asd</b>f</a> <span class='asdf'><b>asd</b>f</span>"

Answer 3

str = "asdf <a href='http://asdf.com'>asdfasdfasdf</a> <span class='asdf'>asdf</span>";
str = str.replace(/a(?!([^<]+)?>)/g, '<b>a</b>')

您将匹配上面的正则表达式 ( /a(?!([^<]+)?>)/g) 以获取标签之外的每个 'a'，然后替换为 ' <b>a</b>'。

返回的html是：

<b>a</b>sdf <a href='http://asdf.com'><b>a</b>sdf<b>a</b>sdf<b>a</b>sdf</a> <span class='asdf'><b>a</b>sdf</span>

Answer 4

您必须先取出 html 标签，然后才能进行替换，这样您就不会在其中混合标签和其他 a。

那么你必须使替换全局，这将导致一个正则表达式。

它有点长，但这会起作用，我相信有人可以稍微简化一下解决方案。

var str = "asdf <a href='http://asdf.com'>asdfasdfasdf</a> <span class='asdf'>asdf</span>",
// strip all html tags
// $1 is used to hold reference to the spot
stripped = str.replace(/<[^<>]+>/g, '$1'),
// keep a reference to all stripped tags
split = str.match(/<[^<>]+>/g),
// highlight the a's with the html tags stripped
highlight = stripped.replace(/a/g, "<b>a</b>"),
// loop length
len = split.length;

// loop through every html tag reference '$1' and replace it back in   
for(var x = 0; x<len; x++) {
  highlight = highlight.replace("$1", split[x]);
}

JSFIDDLE

一个不太冗长的版本：

tags = str.match(/<[^<>]+>/g),

highlight = str.replace(/<[^<>]+>/g, '@@').
    replace(/a/g, "<b>a</b>").
    replace(/@@/g, function() { return tags.shift() });

http://jsfiddle.net/X9cZg/1/

Answer 5

如果您可以使用第一个字母的伪类，您可能可以不使用 CSS。

.asdf:first-letter { 
    font-weight:bold;
}

仅建议这样做，因为您的示例将“a”放在两者的开头。