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

时间:2013-10-09 22:16:49

标签: javascript jquery html

我在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......"

5 个答案:

答案 0 :(得分:3)

  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/

答案 1 :(得分:1)

正则表达式是

 /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>"

答案 2 :(得分:1)

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>

答案 3 :(得分:0)

你必须先取出html标签才能进行替换,这样你就不会混淆标签和其他内部标签。

然后你必须进行替换全局,这将导致正则表达式。

这有点长,但这会起作用,我确信有人可以简化解决方案。

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/

答案 4 :(得分:-1)

如果你可以使用第一个字母的伪类,你可能只能使用CSS。

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

仅建议这样做,因为你的例子在两者的开头都加上'a'。