Выделить последний и символ
Подскажите как реализовать выделение цветом последнего и первого символа в тексте.
|
<html> <script> text = "Съешь еще этих мягких французских булок да выпей же чаю, жуёба" reg = /\s*(\S)(.*)(\S)\s*/ text = text.replace(reg, "<font color='red'>$1</font>$2<font color='red'>$3</font>")//крайние символы $1 $3, середина $2 document.write(text) </script> </html> |
Цитата:
http://htmlbook.ru/css/first-letter |
Livanderiaamarum,
спасибо, как в этих РегЕкспах разобраться=))) Что есть хорошего почитать? |
Гавнокод from 9xakep:
<html>
<script>
text = "trololo"
var str = text.split(' ').join('').split('')
var len = text.split(' ').join('').split('').length
var len2 = text.split(' ').length - 3
var first = 0
var last = len-1
var addText = text.substr(1, len+len2)
document.write("<font color='red'>"+ str[first] +"</font>"+ addText +"<font color='red'>"+ str[last] +"</font>")
</script>
</html>
|
<html><body>
<div id="d1" style="color:#fff">Съешь еще этих мягких французских булок да выпей же чаю, жуёба
25утолимоипечали</div>
<script>
text = document.getElementById('d1').innerHTML;
reg = /\s*(\S)(.*)(\S)\s*/
text = text.replace(reg, "<font color='red'>$1</font>$2<font color='red'>$3</font>")//крайние символы $1 $3, середина $2
document.write(text)
</script>
</html>
Рега во первых страшная - так писать её не стоит, подозреваю она всю память сожрет в длинном тексте создавая на каждый символ промежуточные сохранения, во вторых ищет не то, что должна искать. Лучше привязываться к началу и концу текста, а не к совпадению чего-то. Почитайте Регулярные Выражения Фридл. |
<html><body><style>#d1:first-letter{color:red}</style>
<div id="d1">Съешь еще этих мягких французских булок да выпей же чаю, жуёба
25утолимоипечали</div>
<script>
var text = document.getElementById('d1').innerHTML;
text = text.replace(/([a-zа-яё])$/i, "<font color='red'>$1</font>");
document.getElementById('d1').innerHTML = text;
</script>
</html>
Внутрь класса можно добавить символ, который будет выделен, например следующий выделит точку, если она есть: [a-zа-яё.] Такой подход будет работать быстрее, хотя он и смешанный. Работать будет даже при одном символе в тексте. |
<html><body><style>#d1:first-letter{color:red}</style>
<div id="d1">Съешь еще этих мягких французских булок да выпей же чаю, жуёба
25утолимоипечали23</div>
<script>
var text = document.getElementById('d1').innerHTML;
text = text.replace(/([a-zа-я])$/i, "<font color='red'>$1</font>");
document.getElementById('d1').innerHTML = text;
</script>
</html>
Не будет работать, т.к.: [a-zа-я] ищет только буквы |
9xakep,
Всё будет работать. Не умеешь читать ? Цитата:
|
9xakep,
Ты в своём говнокоде не забудь вырезать переводы строки. Регуляркой вырезать будешь?! :D ps: Задача не такая простая как кажется на первый взгляд и зависит от условия: - откуда берется текст? |
Цитата:
|
Самый простой вариант:
<p id="text">text</p>
<script>
var text = document.getElementById('text');
text.innerHTML = text.innerHTML.replace(/^.|.$/g, '<span style="color:red;">$&</span>');
</script>
Без регулярных выражений:
<p id="text">text</p>
<script>
var elem = document.getElementById('text'),
text = elem.innerHTML,
span = ['<span style="color:red;">', '</span>'];
elem.innerHTML = span[0] + text.charAt(0) + span[1] + text.slice(1, -1) + span[0] + text.slice(-1) + span[1];
</script>
|
Цитата:
|
monolithed,
Тема не имеет смысла без понимания входных данных. Все предложенные варианты включая мой не имеют смысла без озвучки автора входных данных. Цитата:
|
monolithed,
Если у тьебя первым символом будет пробел что будешь делать? Красным его выделять? |
<html><body><style>#d1:first-letter{color:red}</style>
<div id="d1"> Съешь еще этих мягких французских булок да выпей же чаю, жуёба
25утолимоипечали </div>
<script>
var text = document.getElementById('d1').innerHTML;
text = text.replace(/([a-zа-яё])$/i, "<font color='red'>$1</font>");
document.getElementById('d1').innerHTML = text;
</script>
</html>
Братишка, твой способ не работает. Почитай Регулярные Выражения Фридл. |
Livanderiaamarum,
Цитата:
|
Livanderiaamarum, пробел функционально принадлежит к знакам препинания и не является текстовым символом.
Хочешь разводить флуд, разводи. Задача всё равно не решена. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Gozar,
да без тегов и переносов |
Выбирай самый простой вариант monolithed, он короче в записи.
|
а чем мой способ плох я так и не понял? Я про память? обьясни пожалуйста? - только то что память жрет я прочитал уже. я хочу понять что из этого вытекает?
|
Немного не спортивно, но как-то так:
<p id="text"> text </p>
<script>
var text = document.getElementById('text');
text.innerHTML = text.innerHTML.replace(/^\s|\s$/g, '').replace(/^.|.$/g, '<span style="color:red;">$&</span>');
</script>
|
Цитата:
|
Цитата:
анализируется текст по выражению с первого символа) при подхождении к шаблону символ(или группа) добавляется в "стек". если стек наполнился до конца шаблоном то вхождение найдено) если нет, то стек сбрасывается)) это я догадался. может я не прав? но лично я бы так сделал |
А мой делает более интересные вещи :D
<html><div> трололо</div>
<script>
var text = document.getElementsByTagName('div')[0].innerHTML
var str = text.split(' ').join('').split('')
var len = text.split(' ').join('').split('').length
var len2 = text.split(' ').length - 3
var first = 0
var last = len-1
var addText = text.substr(1, len+len2)
document.write("<font color='red'>"+ str[first] +"</font>"+ addText +"<font color='red'>"+ str[last] +"</font>")
</script>
</html>
|
Цитата:
|
<div id="d1">Съешь еще этих мягких французских булок да выпей же чаю, жуёба
3
25утолимоипечали</div>
<script>
var text = document.getElementById('d1');
text.innerHTML = text.innerHTML.replace(/^\s|\s$/g, '').replace(/^.|.$/g, '<span style="color:red;">$&</span>');
</script>
что ты сделал с моими пробелами)? |
Цитата:
Цитата:
|
Цитата:
|
еще такой вариант
<p> Duis te feugifacilisi </p>
<script type="text/javascript">
with(document.getElementsByTagName("p")[0]) {
var x = "<span style=\"color:green\">$&</span>";
innerHTML = innerHTML.replace(/\S(?=\s*$)/, x).replace(/\S/, x);
}
</script>
|
<p> D </p>
<script type="text/javascript">
with(document.getElementsByTagName("p")[0]) {
var x = "<span style=\"color:green\">$&</span>";
innerHTML = innerHTML.replace(/\S(?=\s*$)/, x).replace(/\S/, x);
}
</script>
Два реплейса подряд делать не стоит. |
Gozar, спасибо, понял. Вроде как исправил, только один момент мне остается не ясным: куда деваются пробелы и знаки табуляции в начале и конце строки?) Ясно IE шутки шутит) Собственно, какая разница как будет захватывать спан с пробелами или нет, если на странице это все равно не заметно (в данном случае)?
<p> Duis te feugifacilisi </p>
<script type="text/javascript">
with(document.getElementsByTagName("p")[0]) {
innerHTML = innerHTML.replace(/^\s*(\S)|(\S)\s*$/g, function(f1, f2, f3) {
return "<span style='color:green'>" + (f3 || f2 || f1) + "</span>";
});
alert("!" + innerHTML + "!");
}
</script>
Ну как-то так... |
Цитата:
|
Цитата:
<p id="text"> text </p>
<script>
var text = document.getElementById('text');
text.innerHTML = text.innerHTML.replace(/^( |\s)+|( |\s)+$/g, '').replace(/^.|.$/g, '<span style="color:red;">$&</span>');
</script>
|
Цитата:
|
Цитата:
В конечном счёте всё сведется к какой-нибудь реге в 50-150 символов :D |
| Часовой пояс GMT +3, время: 01:06. |