7

如果使用 JavaScript 括在 ap 标记内，我希望能够控制文本的字体粗细。

例如：母牛跳过{月亮}。{} 中的字体粗细会增加。

这样最终用户可以将其键入文本区域并提交将打印到页面以更改大括号或大括号内的字体粗细。

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

4

5 回答 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/

最好的问候！

于 2012-12-19T10:52:04.497 回答
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/

于 2012-12-19T10:50:31.610 回答
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>

如果您将文本提交到服务器，则可以在服务器端类似地完成魔术。

于 2012-12-19T10:35:59.537 回答
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>

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

于 2012-12-19T11:10:37.390 回答
-1

If tried something, but I'm sure there are more elegant solutions.

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);
    });
});
于 2012-12-19T10:45:48.550 回答