css 包含已呈现和未呈现代码的代码块

t3irkdon  于 2022-11-26  发布在  其他
关注(0)|答案(1)|浏览(124)

我试图在一个代码块中显示html、css和js,同时用正则表达式找到所有的url,并使它们可点击。
我大部分时间都在工作
我遇到的问题是,要么我可以呈现所有的代码,并有可点击的链接,要么我可以不呈现任何代码,链接是不可点击的
这是堆栈
服务器端“Python和Flask”

def highlightTargets(rawHtml):
    urlRegex = r'[http|ftp|https:\/\/]?[\w.-]*\.[\w]*'
    return re.sub(urlRegex, r'<a href="javascript:addTarget(`\g<0>`);"><0></a>', rawHtml.strip())

... endpoint code ....
    return render_template('page.html', data=highlightTargets(rawHtml))

客户端“引导程序5,Jquery 3.6.1”

<pre><code id="data"></code></pre>
<div id="hiddenData" hidden>{{ data }}</div>
<script>
    let data = $("#hiddenData").text();
    $("#data").html(data);

    function addTarget(target){
        //do work
    }
</script>

上面的代码正确地使链接可点击,但它也呈现了我只想显示的html。相反,我希望它使链接可点击,同时还允许您查看其他html。
有没有办法只呈现部分文本而不呈现其余部分?

(我还想问,如果你要投反对票,请帮助我改进,留下评论,为什么。谢谢)

jaxagkaj

jaxagkaj1#

如何在HTML中呈现data

<pre><code id="data">{{ code }}</code></pre>

然后你会遇到html实体的自动转义(由jinja2提供)。要绕过它,你可以用途:

<pre><code id="data">{{ code | safe }}</code></pre>

<pre><code id="data">{% autoscape false %}{{ code }}{% endautoescape %}</code></pre>

参考:https://flask.palletsprojects.com/en/2.2.x/templating/#controlling-autoescaping

相关问题