使用Javascript逃脱HTML5数据属性中的引用 [英] Escape Quotes In HTML5 Data Attribute Using Javascript

查看:93
本文介绍了使用Javascript逃脱HTML5数据属性中的引用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用jQuery的 .data()来处理自定义的HTML5数据属性,其中属性的值需要能够包含单引号和双引号:

I'm using jQuery's .data() to work with custom HTML5 data attributes where the value of the attribute needs to be able to contain both single quotes and double quotes:

<p class="example" data-example="She said "WTF" on last night's show.">

我知道使用字符代码,如& quot; 在数据属性值可以使上述工作,但我不能总是控制如何输入值。此外,我需要能够使用标记中的HTML标签,如下所示:

I know using character codes like &quot; in the data attribute value could make the above work, but I can't always control how the values are inputted. Plus, I need to be able to use HTML tags in the markup, like this:

<p class="example" data-example="
She said "<abbr title="What The F***">WTF</abbr>" on last night's show.
">

如果某种形式的 .replace()是答案,那么需要在 .data()读取该值之前完成此操作,可以通过在整个< body> ;

If some form of .replace() is the answer, then it needs to be done before the value is read by .data()—maybe by applying it across the entire <body>?

正常的反斜杠像< abbr title =te \stst / abbr> 也不起作用。

Normal backslash escaping like <abbr title="te\'st">WTF</abbr> doesn't work either.

理想情况下,这将具有两者兼容的灵活性:

Ideally this would have the flexibility to work w/ both:

data-example =...

data-example =' ...'

但是,如果只有一种方法,那么我至少可以滚动。想法?

But if it's only possible one way then I could at least roll with that. Ideas?

更新 - 更多上下文:

Update - some more context:

这是 responsejs.com 。这个实际应用可能只是加载高于某一宽度的浏览器的侧边栏(并且在浏览器中处理而不是PHP)。例如在WordPress的情况下,侧边栏可能包含小部件,图像等。在PHP标签中的引号是一个非问题的b / c,它们在进入浏览器之前被解析为HTML。示例:

I'm working on this for responsejs.com. An actual application of this might be to only load a sidebar for browsers above a certain width (and have this handled in the browser rather than PHP). In the case of WordPress for example, the sidebar could contain widgets, images, etc. The quotes within PHP tags are a non-issue b/c they are parsed into HTML before they get to the browser. Example:

<aside id="primary" class="sidebar" 

        data-oweb=' 

            <?php dynamic_sidebar( 'primary' ); ?>

        '
    >

    optional default markup for mobile and no-js browsers here

</aside>


推荐答案

没有办法,你必须逃脱值正确,或HTML无法正确解析。解析后,您无法使用Javascript来更正代码,因为它已经失败了。

There is no way around it, you have to escape the values properly, or the HTML can't be parsed properly. You can't use Javascript to correct the code after it is parsed, because then it has already failed.

您的HTML代码适合您的示例是:

Your example with proper HTML encoding would be:

<p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show.">

您不能使用反斜杠转义字符,因为它不是Javascript代码。您可以使用HTML实体来转义HTML代码中的字符。

You can't use backslash to escape characters, because it's not Javascript code. You use HTML entities to escape characters in HTML code.

如果无法控制数据的输入方式,那么您将被拧紧。你只需要找到一种方法来控制它。

If you can't control how the data is input, then you are screwed. You simply have to find a way to take control over it.

这篇关于使用Javascript逃脱HTML5数据属性中的引用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆