logo标签列表

如何使用JavaScript控制段落标签（<p>标签）中用括号或花括号{ }括起来的任何文本的字体粗细？

javascriptcss
7
我希望能够使用JavaScript控制p标签中括号内文本的字体粗细。
例如： 牛跳过了{月球}。括号内的字体粗细将会增加。
这样，最终用户可以在文本区域中输入此类内容，并在提交后打印到页面上，改变大括号或花括号内的字体粗细。
如果有任何帮助，将不胜感激。
1
你能展示一下你目前尝试过的吗？ - bart s
1
使用正则表达式，这里的第二个答案是正确的：https://dev59.com/V3RC5IYBdhLWcg3wFdFx - ThomasM
5个回答
4
以下是如何实现此操作的方法：
var ps = document.getElementsByTagName('p');
    foreach = Array.prototype.forEach;

foreach.call(ps, function (p) {
    var content = p.innerHTML;
    p.innerHTML = content.replace(/\{(.*?)\}|\((.*?)\)/g, function (m) {
        return '<span style="font-weight: bold;">' + m + '</span>';
    });
});
​

当然还有一个示例。

对于这个示例，您只需要使用纯JavaScript，不需要其他库。

  • 编辑：

如果您不想在结果中看到括号，可以使用：

var ps = document.getElementsByTagName('p');
    foreach = Array.prototype.forEach;

foreach.call(ps, function (p) {
    var content = p.innerHTML;
    p.innerHTML = content.replace(/\((.*?)\)|\{(.*?)\}/g, function (m) {
        return '<span style="font-weight: bold;">' + m.replace(/[\(\)\{\}]/g, '') + '</span>';
    });
});

小提琴： http://jsfiddle.net/ma47D/4/

最好的问候！

太好了，我很高兴它有帮助 :-) - Minko Gechev
1

你可以用mootools这样做：

window.addEvent('domready', function()
{
    $$('P').each(function(p)
    {
        p.set('html', p.get('text').replace(/{([^\}]*)*}/g,"<b>$1</b>"));
    });
});​

domready很重要，因为它必须在页面完全加载后完成。转换为jQuery并不那么困难。

http://jsfiddle.net/Smw7Q/1/

0

在本地，您可以像这样处理它：

<!DOCTYPE html>
<html>
    <head>
        <script>
            function transfer(){
                document.getElementById("result").innerHTML=document.getElementById("demo").value.replace(/{/g,'<strong>').replace(/}/g,'</strong>');
            }
        </script>
    </head>
    <body>
        Input: <input type="text" name="input" id="demo"><br>
        <input type="button" value="Submit" onclick="transfer();">
        <p id="result"></p>
    </body>
</html>

如果您将文本提交到服务器，类似的魔法也可以在服务器端完成。
0

我的建议

<!DOCTYPE html>
<html>
    <head>
        <style>
        p span {
            font-size:1.5em;
        }
        </style>
        <script>
        function regex(){
            document.getElementById("output").innerHTML=
                document.getElementById("input").value.replace(/{(.*?)}/g, "<span>$1</span>");
        };
        </script>
    </head>
    <body>
        <p id="output"></p>
        <textarea id="input" rows="30" cols="80"></textarea>
        <input type="button" value="Input" onclick="regex();"/>
    </body>
<html>

当然，在提交之前，您需要对数据进行清理。

-1

我尝试了一些方法，但我相信还有更优雅的解决方案。

http://jsfiddle.net/xT7Fg/

$(document).ready(function(){
    $(tb).blur(function(){
        var str  = '';
        var nextFont = 0;
        $.each($(tb).val(),function(i,char){
            if(nextFont == 0){
                if(char == '{'){
                    if($(tb).val().indexOf(i,'}')){
                        str += '<font size="15">';
                        nextFont = $(tb).val().indexOf('}', i);
                    } else {
                        str += char;                    
                    }
                } else {
                   str += char;                
                }
            } else if (nextFont === i) {
                str += '</font>';
                 nextFont = 0;               
            } else {
                str += char; 
            }      
        });
        $("#txt").html(str);
    });
});
font 标签已经被弃用，最好使用 strong 或 span。if...else 结构可以简化很多，例如：http://jsfiddle.net/xT7Fg/1/。 - Stuart
我知道。这只是一个快速而简单的实现。目标是展示一种算法的方式。 - CyclingFreak
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接