jquery - консолидировать сложные элементы DOM

У меня есть HTML, который был отформатирован с помощью contenteditable div. Я хочу сделать его более сжатым, современным HTML. Я могу легко заменить любые теги b, strong, em, font и т. Д. И заменить их на пролеты, но результат создал «сложены» элементы.jquery - консолидировать сложные элементы DOM

Например, я мог бы иметь:

<span style="font-weight:bold"> 
    <span style="text-decoration:underline">some text</span> 
</span>

И я хочу видеть:

<span style="font-weight:bold; text-decoration:underline">some text</span>

Твердая часть ему необходимо будет обращаться:

<span style="font-weight:bold"> 
    <span style="text-decoration:underline">some text</span> not underlined 
</span>

Я я довольно много искал и думал об этом, но не нашел ничего разумного.

источник

2012-02-14 jopke

Вы хотите сделать это на лету в javascript? –

@JamesMontagne Да. Пользователь вводит текст в div «contenteditable = true», и я хочу его очистить до его отправки. Я не хочу, чтобы HTML-файл div был чистым, просто нужно сделать это, как только пользователь будет выполнен, и это событие, которое я уже захватил. – jopke

@ jopke - У меня было аналогичное требование, когда contenteditable div должен был быть очищен кнопкой отправки. Чтобы упростить вещи, я бы установил useCSS на false, очистил html суп (посмотрите на решение 3 по адресу: http://stackoverflow.com/questions/16226671/consolidate-stacked-dom-formatting-elements-contenteditable-div) и затем используйте regex для быстрого преобразования тегов b/span/s/u/i/em в соответствующий CSS equiv. Обратите внимание, что Solution3 будет заказывать форматирование для всех узлов (так что вы можете изменить порядок форматирования на то, как вы хотите обрабатывать через регулярное выражение). –

Ну, вот начало. Очевидно, ваш селектор будет более конкретным, чем просто span.

$("span").each(function(){ 
    var $this = $(this); 
    var $contents = $(this).contents(); 

    if($contents.length === 1 && $contents.is("span")){ 
     // only one child (including text nodes) and it is a span, combine 
     copyStylesFromParentToChild(); // need to implement this 

     $this.replaceWith($this.children()); // replace the parent with the child 
    } 
});

Единственная сложная часть здесь copyStylesFromParentToChild. Я не знаю простого простого способа скопировать все стили из одного элемента в другой. Вы можете попробовать JavaScript & copy style

источник

2012-02-14 20:21:20

Это похоже на разумный подход. Я скоро отдам его ... – jopke

jquery - консолидировать сложные элементы DOM

ответ

Смежные вопросы