Soru CSS kullanarak bir kapsayıcıdaki belirli kelimeyi renklendirme


Bir konteynerim olduğunu varsayalım:

 <div id="container"> This is a red apple </div>

Kırmızı renkli bir kelime "kırmızı" nasıl renklendirilir? Bir şey gibi (sahte kod)

#container:[word="red"]{
   color:red;
}

Bunu, JavaScript'i tanıtmadan veya mevcut HTML'yi değiştirmeden saf CSS'de yapmak mümkün mü?


17
2018-05-19 12:29


Menşei


Ona bakmak için javascript kullanmalı ve cümlesini kırmalı ve kendi etiketinin içinde istediğin kelimeye sahip olmalısın. görmek - stackoverflow.com/q/119441/104380 - vsync
@ Daniele94 Aslında ben bendim, çünkü soruların sadece bir tanesi OP'nin problemini ele almıyor. Renkli değiştirme ile kelimeleri değiştirmek için bir çeşit arama ve değiştirme işlevi istiyor. Bu sadece CSS ile mümkün olmasa da, javascript ile çok kolay. Vsync tarafından yapılan ilk yorum OP'ye yardımcı olmalıdır. - Ben Fortune
Sadece CSS ile mümkün değil. - shyammakwana.me
@ Daniele94 çünkü js ile nasıl yapılacağını biliyorum. Daha iyi ve daha basit bir çözüm arayışındayım - nicael
Saf CSS ile bunun için bir çözüm sadece sınırlıdır. Makaleye bir göz atın 10 jQuery metin vurgulayıcı eklentileri Bu görevi daha iyi ele alabilen birkaç jQuery eklentisi için, örn. mark.js. - dude


Cevaplar:


Bir noktayı kanıtlamak için değil, sorunuzu cevaplamak için - bu olduğu JS olmadan CSS'de mümkündür: Örnek

Kısaca: metin rengi için siyah arka plan rengi ve belirli kırmızı dizgisi için kırmızı arka plan resmi ayarladık. Orijinal metin dolgusunu -webkit-text-fill-color. Arka plan kullanılarak metin anahattı kırpılır -webkit-background-clip: text; ve kırmızı görüntü, renklendirmek istediğimiz herhangi bir metin dizgisi üzerinde boyutlandırılır ve konumlandırılır.

Lütfen aklınızda bulundurun: Bunu herhangi bir canlı web sitesi için kullanmanızı asla tavsiye etmem. Bu çalışır sadece webkit standart olmayan wekbit-spesifik CSS kurallarına dayanmaktadır. Ve renk renkli metin dizisine gerçekten bağlı değil - tamamen statik.

Düzenle:  İşte CSS:

#container {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 1.5em 1em;
    background-repeat: no-repeat;
    background-position: 3.4em 0;
    background-color: #000;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==);
}

11
2018-05-24 19:30



Bahsettiğim gibi renk metne bağlı değil - manuel olarak konumlandırılmalıdır. Ayarlayarak etrafında hareket edebilirsiniz background-position. Bu, herhangi bir canlı proje için kullanmamamın sebeplerinden biridir. Deneysel CSS'yi sevdiğim için cevap vermeye zorlandım. - agrm
Sola taşınmamış mı? değişiklik background-position: 3.2em 0; için background-position: 3.4em 0;? - nicael
@AliGajani Daha fazla arka plan ayarlamak ve daha fazla kelime oluşturmak için CSS arka plan değerlerini zincirleyebilir / virgülle ayırabilirsiniz. - agrm
Evet, çözümünüzü okumaktan keyif aldım. Çok zekice bir hack Anders - Ali Gajani
Doğru şekilde belirttiğiniz gibi, "Bunu herhangi bir canlı web sitesi için kullanmanızı asla tavsiye etmem." Bu cevap yararlı değil. Sadece metni değiştirin ve göreceksiniz: jsfiddle.net/5qDLs/1 - TMS


Arka fon

Bu, bir CSS ile mümkün olmadığı için bir Vanilla JavaScript çözümüdür. Şakayı değil, oku Şartname. Bir öğenin, öğedeki bir özelliğin adını ve bir öğedeki adlandırılmış bir özelliğin değerini eşleştirebilirsiniz. ben Bir öğenin içindeki içeriği eşleştirmek için hiçbir şey görmüyorum gerçi.

Giriş

İşte benim şutum. Eminim daha zekice bir yol var, ama nasıl başlayacağının özü budur. Ayrıca, isteyeceğiniz sonlu sayıda renk olduğundan Colorify, bir demet kullanmak güzel if benim gibi ifadeler.

Elbette daha iyi bir teknik, bir renk sözlüğü oluşturarak daha programlı bir şekilde yapmak ve böylece kodu organize etmektir. Ama bu işe yarıyor ve Vanilla JS. Görünüşe göre, Regex'te uzmanlığım yoktu, bu yüzden birkaç satırın gereksiz olduğuna eminim.

Özellikler

  • Çoklu renk oluşumları için çalışır
  • Görünür olarak birden fazla renk için çalışır

http://jsfiddle.net/TB62H/5/

var text = document.getElementById("content");
var str = text.innerHTML,
    reg = /red|blue|green|orange/ig; //g is to replace all occurances

//fixing a bit
var toStr = String(reg);
var color = (toStr.replace('\/g', '|')).substring(1);

//split it baby
var colors = color.split("|");

if (colors.indexOf("red") > -1) {
    str = str.replace(/red/g, '<span style="color:red;">red</span>');
}

if (colors.indexOf("blue") > -1) {
    str = str.replace(/blue/g, '<span style="color:blue;">blue</span>');
}

if (colors.indexOf("green") > -1) {
    str = str.replace(/green/g, '<span style="color:green;">green</span>');
}

if (colors.indexOf("orange") > -1) {
    str = str.replace(/orange/g, '<span style="color:orange;">orange</span>');
}


document.getElementById("updated").innerHTML = str;

Sonuçlar

enter image description here


22
2018-05-24 18:59



Bir öneri: Ölçeklendirilebilir hale getirmek için, bir dizi kullanarak değerleri saklamak ve belki bir döngü yapmak için giderdim. Gibi bir şey jsfiddle.net/mfirdaus/TB62H/7 - mfirdaus
Üzgünüm, ama kullanıyorum innerHTML (VanillaJS) veya .html() (jQuery) kötülüktür! Öğenin tüm olaylarını yok edecek ve DOM'ın tekrar ve tekrar üretimini tetikleyecektir. Bu çözüme karşı kesinlikle tavsiye ederseniz! Bunun yerine, bir göz atın mark.jsBu görev için tam olarak onlarca çapraz tarayıcı birim testi ile inşa edilmiştir. - dude
Oradaki güzel kütüphane. Kaydedilen. - Ali Gajani


Ne yazık ki, ihtiyacınız olanı elde etmek için CSS'nin şu anda herhangi bir seçici yok. İstediğinizi elde etmek için JavaScript veya Sunucu Yan Komut Dosyası kullanmanız gerekir.


7
2018-05-19 12:56



@TMS: Hayır, açıkça CSS ile mümkün olmadığını söylüyoruz, ancak JS tabanlı çözümler veriyoruz, bu yüzden diğer cevaplar aşağı çekilmemelidir. - Ali Gajani
@AliGajani Ben hemfikir - Sachin Divakar


Şimdi sadece kullanmama izin verirsen biraz javascript ve belki de bunun ne kadar iyi ölçeklendiğine dair hiçbir fikrim olmadığı için bir çok CSS'yi bozabilir ve uygulama biraz hevesli olabilir. Yani, bence HTML'yi yeniden yazarak css'ye biraz yardım edebiliriz.

Bildiğiniz gibi kelimelerin etrafına bir şeyler ekleyebiliriz ve bunu seçebiliriz. Fakat sadece seçilmiş olanı seçip stil bilgisini eklemek yerine, tüm kelimeleri kapsar. Ve kelimeyi "kelime" özelliğine bir değer olarak ekleyin. Almak için bir yol yardımı ile hepsi textNodesgibi bir şey gibi görünebilir

//adapted from https://stackoverflow.com/a/10730777/1480215
function makeHighlightable(){
  var n, a=[], walk=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) a.push(n);
    for(var i=0;i<a.length;i++){
      var newSpan=document.createElement("span")
      var words=a[i].nodeValue.replace(/[\r\n]/g,"").split(' ');
        for(var j=0;j<words.length;j++){
            var escapedWord=words[j].replace(/[^a-zA-Z0-9-']/g,'').toLowerCase()
            words[j]='<span word="'+escapedWord+'">'+words[j]+'</span>'
        }
        words=words.join(" ")
        newSpan.innerHTML=words
        a[i].parentNode.replaceChild(newSpan,a[i])
    }
}

makeHighlightable()

Bu ile, şimdi yapabilirsiniz

#container [word=red]{ /* space instead of : */
    color:#F00;
}

gösteri

ve o belkiMuhtemelen çalışmak.


3
2018-05-26 07:17



Neden reddedildi? - nicael
@nicael .. bilmiyorum? Ve +1 için teşekkürler - mfirdaus
Ekleme span her kelimeye Gerçekten sevmiyorum. - miguel-svq
word geçerli bir HTML özelliği değil. Kullanmalısın data-word yerine. - James Donnelly


Basit ama yine de DOĞRU cevap: YOK HAYIR.

Lütfen, yorumlarınızdaki diğer kişilere karşı kaba davranmayın, sorunuzu okumak için zaman ayırın, böyle bir sorunu nasıl çözeceklerini düşünün, bir cevap (veya yorum) yazın ve ... sana yardım etmek... haksız bir şekilde tedavi edilmeyi hak etmiyorlar.

Saygılarımızla ve iyi bir görünüm.

Miguel.

Btw: kontrol JQuery kullanarak belirli bir kelimeyi <span> ile sarın ve http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements


2
2018-05-29 22:02





  1. Şu andaki ödeme belgelerinde yalnızca css seçicileri kullanılarak yapılamaz. CSS seçiciler

Jquery ile tek satırlık ifadelerle kolayca yapılabilir

Demoyu Kontrol Et

Vurgulayın ve vurgulayın.

Eğer Mouse ile belirli bir kelimeyi seçtiğinizde En Basit Çözüm Bu Kapsayıcı boyunca vurgulanır

jQuery

var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");
$('div').html(text);

DÜZENLE:

$('#id1').click(
    function(){
    var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");
$('div').html(text);
    }
);

$('#id2').click(
  function(){
      $( "span.red" ).each(function() {
  $( this ).contents().unwrap();

});

    }
);

CSS

.red {
color: red;
}

HTML

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>

DÜZENLE:

<input type="button" value="Click to highlight" id="id1" />
<input type="button" value="Click to remove highlight" id="id2" />


2
2018-05-24 19:36



senin puan 1 ingilizce olarak görünmüyor. - TMS
aman tanrım text() ve yazmak html(). Web güvenliği kullanıcılarının bunu görmesine izin verme - guest


kullanım <span> bunun için.

<div id="container"> This is a <span class="red">red</span> apple </div>

CSS:

.red {
color: red;
}

Düzenle
Herhangi bir ek Javascript veya HTML olmadan mümkün değildir. CSS3'e göre Şartname böyle bir seçici yoktur. :contains() CSS3 için seçici). Ayrıca bkz. bu ve bu Soru.


1
2018-05-19 12:31



OP işaretlemeyi değiştirmek istemiyor - Phlume
Cevabımı zaten düzenlemeden önce yayınladım, boşver. - Kimmax


Html / javascript eklemek istemezseniz, simpel cevabı YOK

Aşağıdaki spesifikasyona bir göz atın http://www.w3.org/TR/css3-selectors/#selectors

Bu, CSS3 için tüm mevcut seçicilerdir ve bunun için sadece imkansızdır ve bu sizin cevabınızdır.

İçeriği değiştirmeden 2 seçeneğiniz kaldı:

  • javaScript
  • sunucu tarafı ayrıştırma böylece her şey span etiketi ile sarılır

1
2018-05-30 09:33





kullanım yalancı öğeler İlk siyah örneği kapatmak için renkli sözcüğü ve bazı dikkatli konumlandırmayı eklemek. Kirli, ama işe yarıyor.

#container
{
    position: relative;
    font-family: monospace;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

#container:after
{
    content: "red";
    color: red;
    position: absolute;
    left: 90px
}

gösteri


DÜZENLEME: Ayrıca, orantılı yazı tipleriyle çalışan bir varyasyon (ancak Chrome'da en azından benim için oldukça temiz bir şekilde oluşturulmuyor):

#container
{
    position: relative;
    margin: 0;
    padding: 0;
}

#container:before
{
    content: "This is a ";
    position: absolute;
    z-index: 2
}

#container:after
{
    content: "This is a red";
    color: red;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

2. Demo


1
2018-05-30 09:36





İnsanların neden JavaScript olmadan bunu yapmanın imkansız olduğunu söylediğini anlamıyorum. Bu tür şeyleri hatırlıyorum <span> öyle:

<div id="container"> This is a <span style="color:red">red</span> apple </div>

0
2018-03-09 02:31





İşte kelimenin etrafında bir sınıf sarmak için jQuery kullanan bazı kod red, bu renklendirilebilir.

 <div id="container">This is a red apple</div>
 $("#container:contains('red')").each(function(){
     $(this).html($(this).html().replace("red", "<span class='red'>red</span>"));
 });

-1
2018-05-26 07:51