使HTML文本变为粗体 [英] Make HTML text bold

查看：233
本文介绍了使HTML文本变为粗体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我编写了这个函数，它接受一个单词作为输入，并将它放在< b> 标记中，以便在HTML中呈现时为粗体。但是当它实际上得到渲染时，这个词不是大胆的，但是只有< b> 标签。



$ p
$ b 

 函数分隔符（输入，值）{
 return input.replace（新的RegExp（'（\\b）（'+ value +'）（\\b）'，'ig'），'$ 1< b> $ 2< / b> $ 3' 
}

提供数值和输入message和This is a test message：

输出为：这是测试< b>消息< / b>

所需的输出是：这是一个测试消息



甚至用 value.bold（）替换值也会返回相同的结果。



编辑
这是HTML与我正在处理的JS一起： 

 <！DOCTYPE html> 
 < head> 
< title>测试< /标题> 
 
< script> 
 
函数myFunction（）{
 var children = document.body.childNodes; 
 for（var len = children.length，child = 0; child< len; child ++）{
 if（children [child] .nodeType === 3）{// textnode 
 var highLight = new Array（'abcd'，'edge'，'rss feeds'）; 
 var contents = children [child] .nodeValue; 
 var output = contents; 
 for（var i = 0; i  output = delimiter（output，highLight [i]）; 
} 
 
 children [child] .nodeValue = output; 
 
 
 
 $ b函数分隔符（输入，值）{
 return unescape（input.replace（new RegExp（'（\\\ \\ b）（'+ value +'）（\\b）'，'ig'），'$ 1< b> $ 2< / b> $ 3'））; 
} 
< / script> 
 
 
 
< / head> 
< body> 
< img src =http://some.web.site/image.jpgtitle =knorex/> 
 
这些词突出显示：abcd，edge，rss feeds，而这些词不是：knowedge，abcdefgh，rss feedssss 
 
< input type =buttonvalue =按钮onclick =myFunction（）> 
< / body> 
< / html>

我基本上得到了分隔符函数的结果并且改变了 nodeValue



是否有可能在收回函数返回给我的方式时出现错误？



这是我做的： 

  children [child]。 nodeValue = output;


解决方案

您需要将标记处理为HTML只是设置为替换文本节点中的现有内容。为此，替换语句

  children [child] .nodeValue = output;

由以下几项组成： 

  var newNode = document.createElement（'span'）; 
 newNode.innerHTML = output; 
 document.body.replaceChild（newNode，children [child]）;


I wrote this function which takes in a word as input and puts it in a <b> tag so that it would be bold when rendered in HTML. But when it actually does get rendered, the word is not bold, but only has the <b> tag arround it.

Here is the function:

function delimiter(input, value) {
    return input.replace(new RegExp('(\\b)(' + value + ')(\\b)','ig'), '$1<b>$2</b>$3');
}

On providing the value and input, e.g. "message" and "This is a test message":

The output is: This is a test <b>message</b>
The desired output is: This is a test message

Even replacing the value with value.bold(), returns the same thing.

EDIT This is the HTML together with the JS that I m working on:

                <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
            <head>
            <title>Test</title>

            <script>

            function myFunction(){
                var children = document.body.childNodes;
                for(var len = children.length, child=0; child<len; child++){
                 if (children[child].nodeType === 3){ // textnode
                    var highLight = new Array('abcd', 'edge', 'rss feeds');
                    var contents = children[child].nodeValue;
                    var output = contents; 
                    for(var i =0;i<highLight.length;i++){
                        output = delimiter(output, highLight[i]); 
                    }

                                children[child].nodeValue= output; 
                }
                }
            }

            function delimiter(input, value) {
                return unescape(input.replace(new RegExp('(\\b)(' + value + ')(\\b)','ig'), '$1<b>$2</b>$3'));
            }
            </script>



            </head>
            <body>
            <img src="http://some.web.site/image.jpg" title="knorex"/>

            These words are highlighted: abcd, edge, rss feeds while these words are not: knewedge, abcdefgh, rss feedssss

            <input type ="button" value="Button" onclick = "myFunction()">
            </body>
            </html>

I'm basically getting the result of the delimiter function and changing the nodeValue of a child node.

Is it possible there is something wrong with the way I'm taking back what the function is returning to me?

This is what I do:

children[child].nodeValue = output;

解决方案

You need to have the markup processed as HTML, instead of being just set to replace existing content in a text node. For this, replace the statement

children[child].nodeValue= output;

by the following:

var newNode = document.createElement('span');
newNode.innerHTML = output;
document.body.replaceChild(newNode, children[child]);

这篇关于使HTML文本变为粗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆