Question

如果使用JavaScript在p标签内括起来，我希望能够控制文本的字体权重。

例如：母牛跳过{moon}。 {}中的font-weight会增加。

这样最终用户就可以将其输入文本区域，然后提交将打印到页面改变大括号或大括号内的字体粗细。

对此的任何帮助都会很棒。

Answer 1

以下是如何执行此操作的方法：

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>';
    });
});

当然是fiddle。对于该示例，您只需要纯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/

最好的问候！

Answer 2

你可以用这样的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/

Answer 3

在本地你可以像这样处理：

<!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>

如果您将文本提交给服务器，可以在服务器端以类似方式完成魔术。

Answer 4

我的建议

<!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>

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

Answer 5

如果尝试了一些东西，但我确信有更优雅的解决方案。

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);
    });
});

如何使用JavaScript控制大括号或大括号{}内段落（<p>标记）内任何文本的字体粗细</p>

5 个答案: