使用RegEx格式化InnerHtml文本无法正常工作

时间:2014-01-25 18:25:14

标签: javascript jquery html css regex

技术:Asp.Net 4.5 WebForms

我使用以下javascript函数为代​​码块中的文本着色。如果我在函数后立即停止警告,它实际上是有效的。但正则表达式渲染并不坚持。如何在功能完成后获得渲染结果?以下是一个小样本。

CSS

<style type="text/css">
    .blue
    {
        color: blue;
    }

    .demo
    {
        background-color: gainsboro; 
        width: 300px; 
        height: 100px; 
        padding: 5px;
    }
</style>

的JavaScript

<script type="text/javascript">
    function Prettyfy() {
        var keys = ["Dim", "As", "String"]

        for (var i = 0; i < keys.length; i++) {
            var value = keys[i];
            var str = document.getElementById("demo").innerHTML;
            var regexExpression = "(?!(?:[^<]+>|[^>]+<\\/a>))\\b(" + value + ")\\b";
            var regex = new RegExp(regexExpression, "ig");
            document.getElementById("demo").innerHTML = str.replace(regex, '<span class="blue">' + value + '</span>');
        }

        alert(document.getElementById("demo").innerHTML);
    }
</script>

HTML

<body>
    <form id="form1" runat="server"> <pre id="demo" class="demo">
            <code>
    dim motor as string
    dim reducer as string
            </code>
        </pre>

        <br />
        <button onclick="Prettyfy()">Prettyfy Code</button>
    </form>
</body>

1 个答案:

答案 0 :(得分:1)

问题很可能是您的表单导致页面默认重绘。在“{1}}:

中添加”类型“属性
<button>

(目前还不清楚为什么会有表格。)