').html("<%= data.name... } " kaedah untuk melaksanakan operasi melarikan diri HTML."/> ').html("<%= data.name... } " kaedah untuk melaksanakan operasi melarikan diri HTML.">
cari
Rumahhujung hadapan webSoal Jawab bahagian hadapanBagaimana untuk melaksanakan anti-melarikan diri dalam javascript

javascript实现反转义的方法:1、打开相应的javascript代码文件;2、通过“var jsonData={title: $('

').html("

Bagaimana untuk melaksanakan anti-melarikan diri dalam javascript

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么实现反转义?

在JavaScript中对HTML进行反转义:

  在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI)、encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别可以参考这篇文章http://qianduanblog.com/post/js-learning-34-en-decodeuri-en-decodeuricomponent-un-escape-btoa-atob.html

  但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码:

var jsonData = {
    title: "<%= data.name? data.name : title %>",
    desc: "<%= data.content? data.content : &#39;&#39; %>",
    image: "<%- data.img? data.img : &#39;&#39; %>"
};

  其中包起来的部分是从服务端返回的值(上例中的代码取自Node.js中Express的ejs模板的代码)。如果从服务端返回的字符串中包含有引号,例如单引号或者双引号,那上述这段JS代码在浏览器中解释的时候会出现错误。如何解决这个问题呢?

  其基本思路是通过页面上DOM元素的innerHTML属性将字符串进行HTML反转义,然后将值返回给JavaScript的变量。看下面两段代码:

1. 原生JavaScript写法:

function htmlDecode(input){
  var e = document.createElement(&#39;div&#39;);
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
htmlDecode("<img src=&#39;myimage.jpg&#39;>");

2. JQuery写法:

function htmlDecode(value){ 
  return $(&#39;<div/>&#39;).html(value).text(); 
}

  第一个函数使用原生的JavaScript方法创建一个DIV元素,然后将需要反转义的字符串赋值给它的innerHTML属性,最后返回DIV元素的nodeValue属性的值。第二个函数则使用JQuery的方法,其基本原理和第一个函数相同。由于DIV元素都只是在内存中创建,并未append或inert到页面上,所以不会对现有的页面产生任何影响。

  最后,我们将一开始的那段代码改成下面的这种方式:

var jsonData = {
    title: $(&#39;<div/>&#39;).html("<%= data.name? data.name : title %>").text(),
    desc: $(&#39;<div/>&#39;).html("<%= data.nontent? data.nontent : &#39;&#39; %>").text(),
    image: "<%- data.img? data.img : &#39;&#39; %>"
};

   这样便可以在JavaScript中对服务器端返回的字符串进行HTML反转义操作了。

【推荐学习:javascript基础教程

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan anti-melarikan diri dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Kekunci dalam React: menyelam mendalam ke dalam teknik pengoptimuman prestasiKekunci dalam React: menyelam mendalam ke dalam teknik pengoptimuman prestasiMay 01, 2025 am 12:25 AM

KeysinreactarecrucialForOptimizingPerformanceAdingInefficientListupdates.1) UsEkeyStoIdentifyandTrackListelements.2) EvoleUsingArtArrayindicesSeyStoPreventProventProveSsues.3) pemilihan yang boleh dikenali

Apakah kunci dalam React?Apakah kunci dalam React?May 01, 2025 am 12:25 AM

Reactkeysareuniqueidiersededwhenrenderingliststoimprovereconciliationeficiency.1) theHelpreacttrackChangesinListItems, 2) menggunakanStableAnduniquiDiersLikeitemidsisismended, 3) mengelakkanAringArtArayindicesSeyStopreVentisswithreordering, dan.

Kepentingan kunci unik dalam React: Mengelakkan perangkap biasaKepentingan kunci unik dalam React: Mengelakkan perangkap biasaMay 01, 2025 am 12:19 AM

UnikKeysarecrucialinreactoroptimizingRenderingAndMaintainingComponentStateIntrity.1) useanaturalUniquierifierifierFromyourdataifavailable.2) ifnonaturalalidentifierexists, generateauniquekeyusingalibraryLikeuUid.3)

Menggunakan indeks sebagai kunci dalam React: apabila ia boleh diterima dan bila tidakMenggunakan indeks sebagai kunci dalam React: apabila ia boleh diterima dan bila tidakMay 01, 2025 am 12:17 AM

Menggunakan indeks sebagai kunci boleh diterima dalam React, tetapi hanya jika pesanan item senarai tidak berubah dan tidak ditambah secara dinamik atau dipadam; Jika tidak, pengenal yang stabil dan unik harus digunakan sebagai kunci. 1) Adalah ok untuk menggunakan indeks sebagai kunci dalam senarai statik (pilihan menu muat turun). 2) Jika item senarai boleh disusun semula, ditambah atau dipadam, menggunakan indeks akan membawa kepada kehilangan negara dan tingkah laku yang tidak dijangka. 3) Sentiasa gunakan ID unik data atau pengenal yang dihasilkan (seperti UUID) sebagai kunci untuk memastikan reaksi mengemas kini DOM dan mengekalkan status komponen.

Sintaks JSX React: Pendekatan mesra pemaju untuk reka bentuk UISintaks JSX React: Pendekatan mesra pemaju untuk reka bentuk UIMay 01, 2025 am 12:13 AM

Jsxisspecialbecauseitblendshtmlwithjavascript, enablingcomponent-berasaseduidesign.1) itallowsembeddingjavascriptinhtml-likesyntax, enhancinguidesignandlogicintegration.2)

Apakah jenis fail audio yang boleh dimainkan menggunakan HTML5?Apakah jenis fail audio yang boleh dimainkan menggunakan HTML5?Apr 30, 2025 pm 02:59 PM

Artikel ini membincangkan format audio HTML5 dan keserasian silang pelayar. Ia meliputi MP3, WAV, OGG, AAC, dan WEBM, dan mencadangkan menggunakan pelbagai sumber dan sandaran untuk akses yang lebih luas.

Perbezaan antara elemen SVG dan kanvas HTML5?Perbezaan antara elemen SVG dan kanvas HTML5?Apr 30, 2025 pm 02:58 PM

SVG dan kanvas adalah elemen HTML5 untuk grafik web. SVG, yang berasaskan vektor, cemerlang dalam skalabiliti dan interaktiviti, manakala kanvas, berasaskan piksel, lebih baik untuk aplikasi intensif prestasi seperti permainan.

Adakah seret dan drop mungkin menggunakan html5 dan bagaimana?Adakah seret dan drop mungkin menggunakan html5 dan bagaimana?Apr 30, 2025 pm 02:57 PM

HTML5 membolehkan seretan dan jatuhkan dengan peristiwa dan atribut tertentu, yang membolehkan penyesuaian tetapi menghadapi masalah keserasian penyemak imbas pada versi lama dan peranti mudah alih.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).