따옴표 붙은 텍스트를 span으로 묶는 방법?

Question

질문이 있으시면, <span style="color: blue">을 따옴표로 묶인 텍스트에 어떻게 추가 할 수 있습니까?

예 :

.. and he said "Hello, I am Nick" 

나는이 결과를 달성 할 정규식을 사용하여 :

.. and he said <span style="color: blue>"Hello, I am Nick"</span> 

나는 정규 표현식 것을 할 수있는 방법을 알고 싶어요. 목표는 따옴표 안에있는 텍스트에만 색상을 적용하는 것입니다. 정규식이 아닌 필수 인 경우

Answer 1

, 당신은 따옴표와 함께 텍스트 사이에 span 태그를 추가 할 수 있습니다 .replaceWith() 기능을 사용하여이 split-map-join뿐만 아니라

var text = document.getElementById("el").innerHTML; 
 

 
function transform(input) 
 
{ 
 
    return input.split("\"").map(function(item,index){ if(index % 2 != 0){ item = '<span style="color: blue">' + item; } return item }).join(""); 
 
} 
 

 
document.getElementById("el").innerHTML = transform(text)

<div id="el"> 
 
and he said "Hello, i am Nick" 
 
</div>

Answer 2

을 시도합니다.

$(document).ready(function() { 
 
    $("h2"). // all p tags 
 
contents(). // select the actual contents of the tags 
 
filter(function(i,el){ return el.nodeType === 3; }). // only the text nodes 
 
each(function(i, el){ 
 
    var $el = $(el); // take the text node as a jQuery element 
 
    var replaced = $el.text().replace(/"(.*?)"/g,'<span class="smallcaps">"$1"</span>') // wrap 
 
    $el.replaceWith(replaced); // and replace 
 
    }); 
 
    
 
});

.smallcaps { 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2>and he said "Hello, i am Nick" and "I am good"</h2>

Answer 3

사용 String.prototype.replace() 방법 :

var str = document.querySelector('div').textContent; 
 
var reg = /(".*\")+/g 
 
var s = str.replace(reg, function(m){ 
 
    return '<span style="color:blue">'+m+'</span>'; 
 
}) 
 

 
document.querySelector('div').innerHTML = s;

<div>and he said "Hello, I am Nick", some extra</div>

Answer 4

'and he said "Hello, I am Nick"'.replace(/"Hello, I am Nick"/, '<span style="color: blue">$&</span>'); 

Answer 5

당신은 FO로 문자열의 .replace() 기능을 사용할 수 있습니다 llows :

---

(1) 당신은 따옴표를 유지하려면 및 <span> 내부를하는 경우 :

var source = '---- "xxxx" ---- "xxxx" ----'; 
 

 
var result = source.replace(/"[^"]*"/g, '<span style="color:blue">$&</span>'); 
 

 
console.log(result); 
 
$('#container').html(result);

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div id="container"></div>

주 :

1. [^"] 순서를 정규 표현식에서 일련의 문자를 정의합니다. 큰 따옴표 이외의 모든 문자와 일치하는 rs. 따라서 [^"]*은 큰 따옴표가 아닌 문자가 0 개 이상 일치합니다.
2. 대체 문자열의 $&은 일치하는 문자로 바뀝니다.

---

(2) 당신이 따옴표를 유지하지 않으려면 : 정규 표현식에서

var source = '---- "xxxx" ---- "xxxx" ----'; 
 

 
var result = source.replace(/"([^"]*)"/g, '<span style="color:blue">$1</span>'); 
 

 
console.log(result); 
 
$('#container').html(result);

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div id="container"></div>

1. 의 괄호는 캡처 그룹을 만들 수 있습니다. 따옴표는 캡처 그룹에 없습니다.)
2. 대체 문자열에 $1는 먼저 포착기로 치환된다.

---

(3) 당신이 따옴표를 유지하기를 원하지만 그들이 <span> 외부에있는 경우 :

var source = '---- "xxxx" ---- "xxxx" ----'; 
 

 
var result = source.replace(/"([^"]*)"/g, '"<span style="color:blue">$1</span>"'); 
 

 
console.log(result); 
 
$('#container').html(result);

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div id="container"></div>

참고 :이 # 2와 동일 따옴표는 대체 문자열에 포함되므로 결과 문자열에 다시 넣습니다.